<template>
  <div class="home">
    <el-card class="bg">
      <!--用户信息 统计-->
      <el-row :gutter="10" class="top">
        <el-col :span="6">
          <el-card class="card card-user">
            <template #header>
              <div class="card-header">
                <el-avatar
                  shape="square"
                  :size="50"
                  :src="userStore.user.user_pic"
                />
                <div class="text">
                  <p class="name">{{ userStore.user?.username }}</p>
                  <p>管理员</p>
                </div>
              </div>
            </template>
            <p class="text-item">登录时间: 2022-05-05 14:05:05</p>
            <p>登录地点: 广州</p>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="card card-statistic">
            <template #header>
              <div class="card-header">
                <span>12月统计信息</span>
              </div>
            </template>
            <div class="item-list">
              <div class="statistic-item">
                <div class="img"></div>
                <div class="mes">
                  <p class="count">500</p>
                  <span>商品数量</span>
                </div>
              </div>
              <div class="statistic-item">
                <div class="img"></div>
                <div class="mes">
                  <p class="count">20</p>
                  <span>商品分类个量</span>
                </div>
              </div>
              <div class="statistic-item">
                <div class="img"></div>
                <div class="mes">
                  <p class="count">121</p>
                  <span>用户访问数量</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--图表-->
      <el-row :gutter="10" class="bottom">
        <el-col class="table table-deal" :span="12">
          <el-card>
            <!-- <e-charts class="chart" :option="dealChartOption" /> -->
            <e-charts class="chart" :option="dealChartOption" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="table table-order">
            <!-- <e-charts class="chart" :option="orderChartOption" /> -->
            <e-charts class="chart" :option="orderChartOption" />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import { useGetChartDataService } from '../../api/mock/home'
import { useUserStore } from '../../stores/modules/user'
const userStore = useUserStore()
const dealData = ref([])
const dealChartOption = computed(() => {
  return {
    title: {
      text: '2022年度成交额',
      left: 'left',
      textStyle: {
        color: '#000',
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    xAxis: {
      type: 'category',
      data: dealData.value.map((v) => v.name)
    },
    yAxis: {
      type: 'value',
      name: '单位（千元）'
    },
    series: [
      {
        type: 'line',
        data: dealData.value.map((v) => v.value),
        smooth: true
      }
    ]
  }
})

const orderData = ref([])
const orderChartOption = computed(() => {
  return {
    title: {
      text: '2022订单数量',
      left: 'left',
      textStyle: {
        color: '#000',
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    xAxis: {
      type: 'category',
      data: orderData.value.map((v) => v.name)
    },
    yAxis: {
      type: 'value',
      name: '单位（个）'
    },
    series: [
      {
        type: 'bar',
        data: orderData.value.map((v) => v.value)
      }
    ]
  }
})

onMounted(async () => {
  nextTick(async () => {
    await initChart()
  })
})

const sortChineseMonths = (data) => {
  const monthMap = {
    一: 1,
    二: 2,
    三: 3,
    四: 4,
    五: 5,
    六: 6,
    七: 7,
    八: 8,
    九: 9,
    十: 10,
    十一: 11,
    十二: 12
  }
  return data.sort((a, b) => {
    const s1 = a.name.charAt(0) + a.name.charAt(1)
    const s2 = b.name.charAt(0) + b.name.charAt(1)
    if (monthMap[s1] && monthMap[s2]) {
      return monthMap[s1] - monthMap[s2]
    }
    return monthMap[a.name.charAt(0)] - monthMap[b.name.charAt(0)]
  })
}
function ensureUniqueMonthNames(arr) {
  const months = [
    '一月',
    '二月',
    '三月',
    '四月',
    '五月',
    '六月',
    '七月',
    '八月',
    '九月',
    '十月',
    '十一月',
    '十二月'
  ]
  const usedMonths = new Set() // 用于追踪已经使用过的月份

  // 添加所有已有的月份到usedMonths中
  arr.forEach((item) => usedMonths.add(item.name))

  return arr.map((item) => {
    // 重复月份
    if (usedMonths.has(item.name)) {
      // 查找一个未使用的月份
      for (let month of months) {
        if (!usedMonths.has(month)) {
          usedMonths.add(month) // 标记这个月份已经被使用
          return { ...item, name: month } // 使用新的月份名称
        }
      }
    }
    // 如果没有重复，则保持原样
    return item
  })
}
const initChart = async () => {
  const { data } = await useGetChartDataService()
  console.log(data)
  // 处理下假数据格式 强迫症
  dealData.value = sortChineseMonths(
    ensureUniqueMonthNames(data.dealChart.data)
  )
  orderData.value = sortChineseMonths(
    ensureUniqueMonthNames(data.orderChart.data)
  )
}
</script>

<style lang="scss" scoped>
.home {
  p {
    margin: 0;
    padding: 0;
  }

  .top {
    margin-bottom: 10px;

    .card {
      height: 200px;
    }

    .card-user {
      .card-header {
        display: flex;

        .text {
          margin-left: 10px;

          .name {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }

    .card-statistic {
      .item-list {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .statistic-item {
          width: 32%;
          height: 100px;
          border: 1px solid #e4e4e4;
          display: flex;

          .img {
            width: 30%;
          }

          &:first-child .img {
            background-color: red;
          }

          &:nth-child(2) .img {
            background-color: yellow;
          }

          &:last-child .img {
            background-color: blue;
          }

          .mes {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            text-align: center;

            .count {
              font-size: 20px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}

.chart {
  height: 400px;
}
</style>
